<template>
    <div>
        <h3>测试axios的发送请求Api</h3>
        <button @click="listMovies">发送get请求</button>&nbsp;丨&nbsp;
        <input type="text" v-model="keyword" placeholder="电影关键字">&nbsp;
        <button @click="listMoviesBykeyword">模糊查询(post)</button>
        <hr>
        <button @click="movie_actors">查询演员列表</button>
        <hr>
    <h1>查询结果</h1>
    <div class="header" style="font-weight:bold;">
      <div class="cover">封面图片</div>
      <div class="title">标题</div>
      <div class="actor">主演</div>
      <div class="showingon">上映时间</div>
      <div class="type">电影类型</div>
      <div class="duration">电影时长</div>
    </div>
        <!-- 表格行 -->
        <div 
      class="header" 
      v-for="item in movieList" :key="item.id">
      <div class="cover">
        <img @click="detailFilm(item.id)" height="80px" :src="item.cover" alt="" >
      </div>
      <router-link class="title" :to="`/detail?id=${item.id}`">
        <!-- <router-link :to="`/movie-detail?id=${item.id}`"> -->
        <!-- <router-link :to="{
          path:'/movie-detail', 
          query:{ id:item }
        }"> -->
        {{item.title}}
        <!-- </router-link> -->
    </router-link>
      <div class="actor">{{item.star_actor}}</div>
      <div class="showingon">{{item.showingon}}</div>
      <div class="type">{{item.type}}</div>
      <div class="duration">{{item.duration}}</div>
    </div>
    </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import myaxios from '../http/MyAxios.js'

    export default {
        data() {
            return {
                keyword:'', //绑定搜索框关键字
                movieList:'',
            }
        },
        methods: {
            //电影图片跳转电影详情
            detailFilm(detailId){
                console.log(this);
                this.$router.push('/detail/'+detailId)
            },
            // 通过关键字查询电影列表
            listMoviesBykeyword(){
                // 发送请求加载电影列表
                let instance = axios.create()
                instance({
                    url:'https://web.codeboy.com/bmdapi/movie-infos/name',
                    method:'POST',
                    // data:'page=1&pagesize=20&name='+this.keyword
                    data:qs.stringify({page:1,pagesize:20,name:this.keyword})
                }).then(res=>{
                    console.log('请求发送成功：',res);
                    this.movieList = res.data.data.result
                })
                // .catch(err=>{
                //     console.log('请求发送失败:',err);
                // })
            },
            listMovies() {
                // 发送请求加载电影列表
                // let instance = axios.create()
                // instance({
                //     url:'https://web.codeboy.com/bmdapi/movie-infos',
                //     method:'GET',
                //     params:{page:1,pagesize:20}
                // }).then(res=>{
                //     console.log('请求发送成功：',res);
                //     this.movieList = res.data.data.result
                //     console.log(this.movieList);
                // }).catch(err=>{
                //     console.log('请求发送失败:',err);
                // })
                let url = 'https://web.codeboy.com/bmdapi/movie-infos'
                let params = {page:1,pagesize:20}
                myaxios.get(url,params).then(res=>{
                    console.log(res);
                    this.movieList = res.data.data.result
                })
            },
            movie_actors(){
                let url = 'https://web.codeboy.com/bmdapi/movie-actors'
                let params = {page:1,pagesize:100}
                myaxios.get(url,params).then(res=>{
                    console.log(res);
                })
            }
        },
        // 测试vue组件的生命周期
        beforeCreate(){     console.log('列表页 beforeCreate')},
        created(){     console.log('列表页 created')},
        beforeMount(){     console.log('列表页 beforeMount')},
        mounted(){     console.log('列表页 mounted')
        let url = 'https://web.codeboy.com/bmdapi/movie-infos'
                let params = {page:1,pagesize:20}
                myaxios.get(url,params).then(res=>{
                    console.log(res);
                    this.movieList = res.data.data.result
                })
    },
        befroUpdate(){     console.log('列表页 befroUpdate')},
        updated(){     console.log('列表页 updated')},
        beforeDestroy(){     console.log('列表页 beforeDestroy')},
        destroyed(){     console.log('列表页 destroyed')},
    }
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    width: 80%;
    margin: 0px auto;
    padding: 10px 0px;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .cover { width: 150px; }
    .title { flex: 1;text-decoration: none; }
    .actor { width: 250px; }
    .showingon { width: 150px; }
    .type { width: 200px; }
    .duration { width: 150px; }
}
</style>